<template>
  <el-card shadow="hover" class="content-card">
    <div class="card-header">
      <el-popover placement="bottom" width="400" trigger="click">
        <el-button
          slot="reference"
          class="card-button"
          type="text"
          icon="el-icon-download"
          size="mini"
        />
        <div v-if="cardData.attachments&&cardData.attachments.length > 0">
          <li v-for="(item, index) in cardData.attachments" :key="index">
            <a
              style="cursor: pointer;"
              @click="downloadUrl(JSON.parse(item).id)"
            >{{ JSON.parse(item).name }}</a>
          </li>
        </div>
        <div v-else>
          <span>暂无文件</span>
        </div>
      </el-popover>
      <el-button
        class="card-button"
        type="text"
        icon="el-icon-delete"
        size="mini"
        @click="handleDelete"
      />
    </div>
    <p class="content-span">{{ cardData && cardData.title }}</p>
  </el-card>
</template>
<script>
import { remove } from '@/api/zzxt/notice'
import { downloadUrl } from '@/api/common/static'
export default {
  name: 'DcoumentCard',
  props: {
    cardData: { type: Object, default: null }
  },
  data: () => ({
    fileList: null
  }),
  watch: {},
  methods: {
    downloadUrl,
    handleDelete() {
      this.$confirm('确认删除吗？').then(_ => {
        remove(this.cardData).then(() => {
          this.$message.success('删除成功')
          this.$emit('requireRefreshDocument')
        })
      })
    },
    handleDownload() {
      console.log(this.cardData)
      debugger
    }
  }
}
</script>
<style lang="scss" scoped>
.content-card {
  width: 100%;
  padding: 0 0.3rem 0.3rem 0;
  border-radius: 12px;
  margin-bottom: 0.6rem;
}
.card-header {
  padding: 0;
  border-bottom: 1px solid #e6ebf5;
  box-sizing: border-box;
}
.card-button {
  transition: all 0.5s ease;
  :hover {
    color: #f00;
  }
  margin-left: 1rem;
  color: #888;
}
.content-span {
  font-family: 'PingFang SC';
  color: '#909399';
  font-size: 14px;
  padding: 0.6rem;
  white-space: inherit;
}
</style>
